<template>
  <div v-loading="loading" :element-loading-text="loadingText" class="detail">
    <div v-show="!showPicDetail">
      <div v-if="!isAudit" class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="clickBack">成品类样品配置</el-breadcrumb-item>
          <!-- <el-breadcrumb-item>成品配置单</el-breadcrumb-item> -->
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click="clickBack">返回</el-button>
        </div>
      </div>
      <c-list :column="3">
        <c-list-item label="产品配置单" :value="formData.configCode" />
        <c-list-item label="对应产品配置任务" :value="formData.configTaskCode" />
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
        <c-list-item label="产品配置进度" dict-type-code="PRO_CONFIG_SCHEDULE" :value="formData.schedule" />
        <!-- <c-list-item label="是否含自主配置" dict-type-code="BOOLEANS" :value="formData.haveSelfSampleLoad" /> -->
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户名称" :value="formData.clientName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
        <c-list-item label="采购订单号" :value="formData.poCode" />
        <c-list-item label="采购订单状态" dict-type-code="PO_STATE" :value="formData.poState" />
        <c-list-item label="采购订单提报时间" :value="formData.orderCreateTime" />
        <c-list-item label="是否按标准配置上样" dict-type-code="BOOLEANS" :value="formData.isStandardSample" />
        <c-list-item label="未按标准配置上样原因" dict-type-code="NONSTANDARD_CONFIGURATION" :value="formData.unstandardSampleReason" />
        <c-list-item label="自主上样流程号" :value="formData.processInstanceNo" />
        <c-list-item label="异常说明" :value="formData.exceptionDesc" />
        <c-list-item label="是否满足出图数量要求" dict-type-code="BOOLEANS" :value="formData.isSatisfyOutpicNum" />
        <c-list-item label="关联图纸总面积" :value="picTotalArea" />
        <c-list-item v-if="!isAudit" label="审核结果" dict-type-code="REVIEW_RESULT" :value="formData.reviewResult" />
        <c-list-item v-if="!isAudit" label="审核意见" :value="formData.reviewAdvice" />
        <c-list-item label="创建人" :value="formData.createBy" />
        <c-list-item label="创建时间" :value="formData.createTime" />
        <c-list-item label="修改人" :value="formData.lastUpdateBy" />
        <c-list-item label="修改时间" :value="formData.lastUpdateTime" />
      </c-list>
      <c-section title="关联图纸信息">
        <c-table-box hide-func :data="formData.designPictureDtos" :table-config="tableConfig" />
      </c-section>
      <c-section title="产品配置清单">
        <div style="margin-bottom: 20px">
          <el-table
            v-loading="tableLoading"
            element-loading-text="加载中"
            :data="configDetailDtos"
            :span-method="objectSpanMethod"
            border
            highlight-current-row
            :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column type="index" />
            <el-table-column prop="areaName" label="所属区域" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.areaName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="spaceName" label="所属空间" min-width="150" />
            <el-table-column prop="styleName" label="所属专区" min-width="150" />
            <el-table-column prop="spaceTotalArea" label="空间面积" show-overflow-tooltip min-width="150" />
            <el-table-column prop="seriesName" label="系列名称" min-width="150" />
            <el-table-column prop="categoryNames" label="包含品类" min-width="200" />
            <el-table-column prop="categoryNumber" label="出图品类数量" min-width="150" />
            <el-table-column prop="recommendType" label="推荐类别" show-overflow-tooltip min-width="150">
              <template slot-scope="scope">
                <span>{{ formaterData(recommendTypeList, scope.row.recommendType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="modelCode" label="型号" min-width="100" />
            <el-table-column prop="recommendProgram" label="所属方案" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ formaterData(recommendProgramList, scope.row.recommendProgram) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="proPosition" label="产品定位" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ formaterData(seriesNameList, scope.row.proPosition) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productCode" label="产品编码" min-width="150" show-overflow-tooltip />
            <el-table-column prop="productDesc" label="产品描述" min-width="150" show-overflow-tooltip />
            <el-table-column prop="productState" label="产品状态" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ formaterData(proStateList, scope.row.productState) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="pcontrolState" label="采购控制状态" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ formaterData(canBePurchaseList, scope.row.pcontrolState) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="poRowState" label="采购订单行状态" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ formaterData(purOrderStateList, scope.row.poRowState) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productNumber" label="产品数量" min-width="150" />
          </el-table>
        </div>
      </c-section>
    </div>
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
    <!-- <div class="btn-container">
      <el-button type="primary" @click="clickBack">返回</el-button>
    </div> -->
  </div>
</template>
<script>
// import RelevanceDrawing from '../components/relevanceDrawing'
import { getProConfigEditData, getDictByTypeCode, getProOutpicCategory } from '@/api/proConfig'
import { getDictByPatchType } from '@/api/dataDict'
import { getAreaData } from '../task/components/index'
import detail from '../../shopDrawing/management/detail.vue'
export default {
  name: 'PCFinishedDetail',
  components: {
    // RelevanceDrawing
    detail
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: '',
      rowId: '',
      showPicDetail: false,
      loading: false,
      loadingText: '',
      picTotalArea: '',
      areaList: [],
      designRangeList: [],
      decorationTypeList: [],
      designSpaceList: [],
      designBizTypeList: [],
      recommendTypeList: [],
      purOrderStateList: [],
      // nonstandardList: [],
      regionList: [
        { dictCode: 'Q001', dictName: '成品' },
        { dictCode: 'Q002', dictName: '全屋定制' },
        { dictCode: 'Q003', dictName: '整体橱柜' },
        { dictCode: 'Q004', dictName: '卫浴' },
        { dictCode: 'Q005', dictName: '样板间' }
      ],
      formData: {},
      configDetailDtos: [],
      tableConfig: {
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toPicDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.designRangeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationType) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 140,
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 120
          },
          // {
          //   prop: 'finishedProductAreaSummary',
          //   label: '成品业务面积汇总',
          //   minWidth: 100
          // },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            minWidth: 140
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 120
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总',
            minWidth: 100
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 140
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            },
            minWidth: 100
          },
          {
            prop: 'state',
            label: '图纸状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            },
            minWidth: 100
          }
        ]
      }
    }
  },
  async created() {
    this.loading = false
    this.loadingText = '加载中'
    this.formData.id = this.$route.params.data.id
    this.type = this.$route.params.type
    await this.getDictByPatchTypeAll(['PRODUCT_STATE', 'CAN_BE_PURCHASE']).then(res => {
      this.proStateList = res.PRODUCT_STATE
      this.canBePurchaseList = res.CAN_BE_PURCHASE
    }).catch(() => {
      this.loading = false
      this.loadingText = ''
    })
    await this.getDictByTypeCode(['RECOMMEND_TYPE', 'DECORATION_RANGE', 'DECORATION_FORM', 'BELONG_REGION', 'BIZ_TYPE', 'PUR_ORDER_STATE_ITEM']).then(res => {
      this.designRangeList = res.DECORATION_RANGE // 设计范围
      this.decorationTypeList = res.DECORATION_FORM // 装修形式
      this.designSpaceList = res.BELONG_REGION // 设计区域
      this.designBizTypeList = res.BIZ_TYPE // 设计业务类型
      this.recommendTypeList = res.RECOMMEND_TYPE // 推荐类别
      this.purOrderStateList = res.PUR_ORDER_STATE_ITEM // 采购订单行状态
    }).catch(() => {
      this.loading = false
      this.loadingText = ''
    })
    this.areaList = await getAreaData()
    await getProConfigEditData(this.formData.id).then(async res => {
      if (res.success && res.data) {
        this.formData = res.data
        let picArr = 0
        this.formData.designPictureDtos.forEach(item => {
          picArr = picArr + (isNaN(Number(item.picTotalArea)) ? 0 : Number(item.picTotalArea))
        })
        this.picTotalArea = picArr
        this.configDetailDtos = this.tableFormater(this.formData.configOutPicDtos)
        if (this.formData.designPictureDtos.length && !this.configDetailDtos.length) {
          await this.getOutpicCategory(this.formData.designPictureDtos)
        }
      }
      this.loading = false
      this.loadingText = ''
    }).catch(() => {
      this.loading = false
      this.loadingText = ''
    })
    if (this.type === 'audit') {
      this.$emit('getDetail', this.formData)
    }
  },
  methods: {
    /**
     * 表格合并
     * @param {*} param0
     * row 表格每一行的数据
     * column 表格每一列的数据
     * rowIndex 表格的行索引,不包括表头,从0开始
     * columnIndex 表格的列索引,从0开始
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 6) {
        // 过滤需要合并的行数
        if (row.spanIndex) {
          // 若rowIndex存在，则合并
          return {
            rowspan: row.spanIndex,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    // 获取出图品类及数量
    getOutpicCategory() {
      this.tableLoading = true
      const picTaskCodes = this.formData.designPictureDtos.map(item => item.picTaskCode)
      getProOutpicCategory(picTaskCodes).then(async res => {
        if (res.success && res.data && res.data.records) {
          // this.allOutpicTableData = res.data.records
          // this.allOutpicTableData.forEach(item => {
          //   item.configDetailDtos = []
          //   item.spanIndex = 1
          //   item.outpicCategoryNumberId = item.id
          // })
          this.configDetailDtos = await this.tableFormater(res.data.records)
        }
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    tableFormater(data) {
      if (!data || !data.length) return []
      const arr = []
      data.forEach(row => {
        if (row.configDetailDtos && row.configDetailDtos.length) {
          row.configDetailDtos.forEach((item, index) => {
            item.outpicCategoryNumberId = row.id
            item.areaCode = row.areaCode
            item.areaName = row.areaName
            item.spaceName = row.spaceName
            item.spaceCode = row.spaceCode
            item.spaceTotalArea = row.spaceTotalArea
            item.styleName = row.styleName
            item.styleCode = row.styleCode
            item.categoryName = row.categoryNames
            item.categoryCode = row.categoryCodes
            item.categoryNames = row.categoryNames
            item.categoryCodes = row.categoryCodes
            item.categoryNumber = row.categoryNumber
            if (row.seriesCode) {
              item.seriesName = row.seriesName
              item.seriesCode = row.seriesCode
            } else {
              row.seriesName = item.seriesName
              row.seriesCode = item.seriesCode
            }
            if (index === 0) {
              item.spanIndex = row.configDetailDtos.length
            }
            arr.push(item)
          })
        } else {
          row.outpicCategoryNumberId = row.id
          row.recommendType = ''
          row.modelCode = ''
          row.modelName = ''
          row.proPosition = ''
          row.productDesc = ''
          row.productCode = ''
          row.productArr = []
          row.productState = ''
          row.pcontrolState = ''
          row.productNumber = ''
          // row.checked = false
          this.$set(row, 'checked', false)
          row.spanIndex = 1
          arr.push(row)
        }
      })
      return arr
    },
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByTypeCode(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 获取数据字典
    async getDictByTypeCode(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    clickBack() {
      this.formData = {}
      this.$store.dispatch('views/goBack')
    },
    // 查看图纸详情
    toPicDetail(row) {
      this.rowId = row
      this.showPicDetail = true
    },
    // 返回配置详情
    backDetail() {
      this.showPicDetail = false
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
